<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 左侧：平台介绍和消息待办卡片 -->
      <el-col :sm="24" :lg="12" style="padding-left: 20px;">
        <el-card class="box-card info-card">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="平台介绍" name="introduction">
              <h2>智能边缘设备资产管理平台</h2>
              <p>
                欢迎来到**智能边缘设备资产管理平台**——您用于无缝控制、监控和协调分布式边缘设备的中心枢纽。本平台旨在简化管理庞大边缘基础设施网络的复杂性，使您能够以无与伦比的效率部署、更新和保护您的设备。
              </p>
              <p>
                无论您是在管理物联网传感器、工业网关还是智能零售设备，我们的平台都能提供所需的工具，以最大限度地延长运营正常运行时间、确保数据完整性，并释放边缘部署的全部潜力。我们致力于提供一个强大、可扩展且用户友好的解决方案，以适应您不断变化的需求。
              </p>
              <p>
                <b>当前版本:</b> <span>v{{ version }}</span>
              </p>
            </el-tab-pane>
            <el-tab-pane label="消息待办" name="messages">
              <div class="message-list-container">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in messages"
                    :key="index"
                    :timestamp="activity.timestamp"
                    :color="activity.color"
                    placement="top"
                  >
                    <el-card>
                      <h4>{{ activity.title }}</h4>
                      <p>{{ activity.content }}</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2025-07-01" color="#909399" placement="top">
                    <el-card>
                      <h4>暂无更多待办事项</h4>
                      <p>所有任务已处理完毕。</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

      <!-- 右侧：设备概览统计 -->
      <el-col :sm="24" :lg="12">
        <el-card class="box-card statistics-card">
          <div slot="header" class="clearfix">
            <span>设备概览统计</span>
          </div>
          <div class="card-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="statistic-item simple-style blue-border">
                  <div class="statistic-value">{{ totalDevices }}</div>
                  <div class="statistic-label">总设备数</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="statistic-item simple-style green-border">
                  <div class="statistic-value">{{ onlineDevices }}</div>
                  <div class="statistic-label">在线设备</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="statistic-item simple-style red-border">
                  <div class="statistic-value">{{ offlineDevices }}</div>
                  <div class="statistic-label">离线设备</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="statistic-item simple-style yellow-border">
                  <div class="statistic-value">{{ activeTasks }}</div>
                  <div class="statistic-label">活跃任务</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="workbench-card">
          <div slot="header" class="clearfix">
            <span>工作台</span>
          </div>
          <div class="workbench-buttons">
            <el-row :gutter="20" class="button-row">
              <el-col :span="8">
                <el-badge :value="5" :hidden="false" class="item">
                  <div class="module-card blue-bg" @click="navigateTo('/device/register')">
                    <i class="el-icon-plus module-icon"></i>
                    <div class="module-title">设备注册</div>
                    <div class="module-desc">管理新设备的接入与配置</div>
                  </div>
                </el-badge>
              </el-col>
              <el-col :span="8">
                <el-badge :value="2" :hidden="false" class="item" type="danger">
                  <div class="module-card green-bg" @click="navigateTo('/runtime/management')">
                    <i class="el-icon-s-operation module-icon"></i>
                    <div class="module-title">运时管理</div>
                    <div class="module-desc">创建、配置与执行设备任务</div>
                  </div>
                </el-badge>
              </el-col>
              <el-col :span="8">
                <el-badge :value="3" :hidden="false" class="item" type="warning">
                  <div class="module-card gray-bg" @click="navigateTo('/status/monitoring')">
                    <i class="el-icon-monitor module-icon"></i>
                    <div class="module-title">状态监控</div>
                    <div class="module-desc">实时查看设备在线状态与功能</div>
                  </div>
                </el-badge>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="button-row">
              <el-col :span="8">
                <el-badge :value="1" :hidden="false" class="item" type="info">
                  <div class="module-card yellow-bg" @click="navigateTo('/info/forwarding')">
                    <i class="el-icon-s-promotion module-icon"></i>
                    <div class="module-title">信息转发</div>
                    <div class="module-desc">配置设备事件信息对外转发</div>
                  </div>
                </el-badge>
              </el-col>
              <el-col :span="8">
                <el-badge :value="8" :hidden="false" class="item" type="primary">
                  <div class="module-card red-bg" @click="navigateTo('/system/maintenance')">
                    <i class="el-icon-setting module-icon"></i>
                    <div class="module-title">系统维护</div>
                    <div class="module-desc">管理操作员与平台基本设置</div>
                  </div>
                </el-badge>
              </el-col>
              <el-col :span="8">
                <!-- "更多功能..." 模块，点击后弹出对话框 -->
                <div class="module-card more-features-card" @click="toggleMoreFeatures">
                  <i class="el-icon-more module-icon"></i>
                  <div class="module-title">更多功能...</div>
                  <div class="module-desc">敬请期待</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 更多功能对话框 -->
    <el-dialog
      title="更多功能"
      :visible.sync="dialogVisible"
      width="60%"
      center
      class="more-features-dialog"
    >
      <div class="dialog-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="feature-tile" @click="navigateTo('/feature/analytics')">
              <i class="el-icon-data-analysis feature-icon"></i>
              <p>数据分析</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-tile" @click="navigateTo('/feature/reports')">
              <i class="el-icon-document feature-icon"></i>
              <p>报表中心</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-tile" @click="navigateTo('/feature/logs')">
              <i class="el-icon-tickets feature-icon"></i>
              <p>日志管理</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-tile" @click="navigateTo('/feature/integration')">
              <i class="el-icon-connection feature-icon"></i>
              <p>系统集成</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-tile" @click="navigateTo('/feature/ai-models')">
              <i class="el-icon-cpu feature-icon"></i>
              <p>AI模型库</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-tile" @click="navigateTo('/feature/customization')">
              <i class="el-icon-brush feature-icon"></i>
              <p>个性化定制</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 平台版本号
      version: "1.0.0", // 您可以根据实际版本进行修改
      // 控制更多功能对话框的显示与隐藏
      dialogVisible: false,
      // Tab 默认激活项
      activeTab: 'introduction',
      // 设备统计数据 (示例数据)
      totalDevices: 128,
      onlineDevices: 105,
      offlineDevices: 23,
      activeTasks: 15,
      // 消息待办数据 (示例数据)
      messages: [
        {
          title: '设备注册审批',
          content: '有 3 台新设备等待您的审批。',
          timestamp: '2025-07-08 10:00',
          color: '#409EFF' // 蓝色
        },
        {
          title: '任务执行异常',
          content: '任务“工厂巡检”在 2 号场所设备出现异常。',
          timestamp: '2025-07-07 15:30',
          color: '#F56C6C' // 红色
        },
        {
          title: '系统维护通知',
          content: '平台将于今晚 23:00 进行例行维护，预计持续 1 小时。',
          timestamp: '2025-07-06 09:00',
          color: '#E6A23C' // 黄色
        },
        {
          title: '新功能上线提醒',
          content: '“设备固件批量升级”功能已正式上线，欢迎体验！',
          timestamp: '2025-07-05 11:45',
          color: '#67C23A' // 绿色
        }
      ]
    }
  },
  methods: {
    // navigateTo 方法用于模拟点击工作台按钮跳转到对应模块
    // 在实际项目中，这里通常会使用 Vue Router 的 this.$router.push()
    navigateTo(path) {
      console.log(`Navigating to: ${path}`);
      // 实际项目中，这里会是:
      // this.$router.push(path);
      // 为了演示，这里可以模拟打开新窗口或者只是打印日志
      // window.open(path, "_blank"); // 如果是外部链接
      // alert(`跳转到 ${path} 模块`); // 简单的提示
      this.dialogVisible = false; // 关闭对话框
    },
    // 切换更多功能对话框的显示状态
    toggleMoreFeatures() {
      this.dialogVisible = !this.dialogVisible;
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .info-card {
    height: 350px; /* 固定高度 */
    .el-tabs__content {
      height: calc(100% - 55px); /* 减去tab头的高度 */
      overflow-y: auto; /* 允许内容滚动 */
      padding: 10px; /* 增加内边距 */
    }
    .message-list-container {
      padding: 10px 0;
      max-height: 280px; /* Explicit max-height for scrollbar in messages tab */
      overflow-y: auto; /* Ensure scrollbar if content overflows */
      .el-timeline {
        padding-left: 5px;
      }
      .el-card {
        margin-bottom: 15px;
        h4 {
          margin: 0 0 5px;
          font-size: 16px;
          color: #303133;
        }
        p {
          margin: 0;
          font-size: 13px;
          color: #606266;
        }
      }
    }
  }

  .statistics-card {
    height: 350px; /* 固定高度，与info-card保持一致 */
    .card-content {
      display: flex;
      flex-wrap: wrap; /* Allow items to wrap */
      justify-content: space-around; /* Distribute items evenly */
      align-content: center; /* Center content vertically */
      height: calc(100% - 40px); /* Adjust height to fill card, accounting for header */
      padding: 10px;
    }
    .statistic-item.simple-style { // Apply new styles to this class
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15px; // Adjusted padding for better spacing
      border-radius: 8px;
      background-color: #ffffff; // White background for the card
      margin-bottom: 15px; // Increased margin for separation
      height: 145px; // Adjusted height to ensure content fits within the card
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); // Subtle shadow for elevation
      transition: all 0.3s ease;
      position: relative; /* For the border effect */
      overflow: hidden; /* Hide overflow for border animation */

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }

      /* No icon-wrapper or statistic-icon styles as they are removed */

      .statistic-value {
        font-size: 38px; // Larger value font size
        font-weight: bold;
        color: #303133;
        margin-bottom: 4px; // Space between value and label
        z-index: 1; /* Ensure text is above pseudo-element */
      }
      .statistic-label {
        font-size: 16px; // Larger label font size
        color: #606266;
        z-index: 1; /* Ensure text is above pseudo-element */
      }

      // Border styles for each item
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px; /* Height of the colored border */
        background-color: transparent;
        transition: background-color 0.3s ease;
      }

      &.blue-border::before { background-color: #409EFF; }
      &.green-border::before { background-color: #67C23A; }
      &.red-border::before { background-color: #F56C6C; }
      &.yellow-border::before { background-color: #E6A23C; }
    }
  }

  .workbench-card {
    .workbench-buttons {
      text-align: center;
      .button-row {
        margin-bottom: 30px; // Spacing between rows of buttons
      }
      .el-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .module-card {
        width: 180px; // Fixed width for cards
        height: 120px; // Fixed height for cards
        font-size: 18px;
        margin-bottom: 10px; // Space between card and description
        border-radius: 10px; // Rounded corners for cards
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Subtle shadow
        transition: all 0.3s ease; // Smooth transition for hover effects
        color: white; // Ensure text is white for colored backgrounds
        border: none; // Remove default border
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative; /* For badge positioning */

        &:hover {
          transform: translateY(-3px); // Lift effect on hover
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); // Enhanced shadow on hover
        }

        .module-icon {
          font-size: 40px; // Larger icons
          margin-bottom: 5px; // Space between icon and title
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 2px; // Space between title and description
        }

        .module-desc {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.8); // Lighter text for description
          text-align: center;
          padding: 0 10px;
        }
      }

      // Custom card colors based on the image style
      .blue-bg {
        background-color: #409EFF; // Primary blue
      }
      .green-bg {
        background-color: #67C23A; // Success green
      }
      .gray-bg {
        background-color: #909399; // Info gray
      }
      .yellow-bg {
        background-color: #E6A23C; // Warning yellow
      }
      .red-bg {
        background-color: #F56C6C; // Danger red
      }

      .more-features-card {
        width: 180px; // Fixed width for cards
        height: 120px; // Fixed height for cards
        font-size: 18px;
        color: #909399; // Text color for disabled card
        border: 1px dashed #DCDFE6; // Dashed border
        background-color: #F4F4F5; // Light background
        border-radius: 10px;
        box-shadow: none; // No shadow for disabled card
        cursor: pointer; // Indicate it's clickable now
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .module-icon {
          font-size: 40px;
          margin-bottom: 5px;
        }
        .module-title {
          font-weight: bold;
          margin-bottom: 2px;
        }
        .module-desc {
          color: #909399;
        }
      }

      .button-desc {
        font-size: 12px;
        color: #909399;
        margin-top: 0;
        /* Hide the separate description below the card, as it's now inside the card */
        display: none;
      }
      .item {
        position: relative; // Ensure badge positions relative to this wrapper
        display: inline-block; // Allow badge to wrap the card
        .el-badge__content {
          top: 10px; // Adjust badge vertical position
          right: 10px; // Adjust badge horizontal position
          transform: translateY(-50%) translateX(50%); // Fine-tune badge position
        }
      }
    }
  }

  /* Styles for the more features dialog */
  .more-features-dialog {
    .el-dialog__body {
      padding: 20px;
    }
    .dialog-content {
      text-align: center;
      .feature-tile {
        width: 150px;
        height: 100px;
        background-color: #F0F2F5;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 10px auto;
        cursor: pointer;
        transition: all 0.2s ease;
        &:hover {
          background-color: #E6E8EB;
          transform: translateY(-2px);
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .feature-icon {
          font-size: 36px;
          color: #409EFF;
          margin-bottom: 5px;
        }
        p {
          font-size: 14px;
          color: #303133;
          margin: 0;
        }
      }
    }
  }
}
</style>
